<template>
  <div class="container">
    <!-- 数据大屏展示内容区域 -->
    <div class="screen" ref="screen">
      <!-- 数据大屏顶部 -->
      <div class="top">
        <Top/>
      </div>
      <div class="bottom">
        <div class="left">
          <LTop style="flex: 1.2"></LTop>
          <LMiddle style="flex: 1"></LMiddle>
          <LBottom style="flex: 1"></LBottom>
        </div>
        <div class="center">
          <CTop style="flex: 4"></CTop>
          <CBottom style="flex: 1"></CBottom>
        </div>
        <div class="right">
          <RTop style="flex: 1.5"></RTop>
          <RMiddle style="flex: 1"></RMiddle>
          <RBottom style="flex: 1"></RBottom>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from "vue";
//引入顶部的子组件
import Top from './components/top/index.vue';

//引入左侧三个子组件
import LTop from './components/left_top/index.vue'
import LBottom from './components/left_bottom/index.vue'
import LMiddle from './components/left_middle/index.vue'

//引入右侧三个子组件
import RTop from './components/right_top/index.vue'
import RBottom from './components/right_bottom/index.vue'
import RMiddle from './components/right_middle/index.vue'

//引入中间两个子组件
import CTop from './components/center_top/index.vue'
import CBottom from './components/center_bottom/index.vue'


//获取数据大屏展示内容盒子的DOM元素 (用于做不同大小的适配)
let screen = ref();
onMounted(() => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
});

//定义大屏缩放比例 (用于做不同大小的适配)
function getScale(w = 1920, h = 1080) {
  const ww = window.innerWidth / w;
  const wh = window.innerHeight / h;
  return ww < wh ? ww : wh;
}

//监听视口变化 (用于做不同大小的适配)
window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}


</script>

<style scoped lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  background: url(@/assets/screen/bg.jpg) no-repeat;
  background-size: cover;

  .screen {
    position: fixed;
    width: 1920px;
    height: 1080px;
    left: 50%;
    top: 50%;
    transform-origin: left top;

    .top {
      width: 100%;
      height: 40px;
    }

    .bottom {
      box-sizing: border-box;
      display: flex;
      flex: 1;
      width: 100%;
      padding: 12px 42px 20px;

      .right {
        display: flex;
        flex-direction: column;
        width: 394px;
        height: 100%;
      }

      .left {
        display: flex;
        flex-direction: column;
        width: 394px;
        height: 100%;
      }

      .center {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-right: 40px;
      }
    }
  }
}
</style>
